<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<script src="html5TestJS.js"></script>
	</head>

	<body onload="init()">
		<table>
			<tr>
				<td>姓名：</td>
				<td><input type="text" id="name"></td>
			</tr>
			<tr>
				<td>留言：</td>
				<td><input type="text" id="memo"></td>
			</tr>
			<tr>
				<td><input type="button" value="保存" onclick="saveData()"></td>
				<td><input type="button" value="删除某个表" onclick="dropTable()"></td>
			</tr>
		</table>
		<hr>
		<table border="1" id="datatable"></table>
		<p id="msg"></p>
	</body>
	<script src="index.js"></script>
	<script>
		/**
		 * Created by Administrator on 2016/5/6 0006.
		 */
		var datatable = null;
		var db = openDatabase("MyData", "", "My Database", 1024 * 100);

		function init() {
			datatable = document.getElementById("datatable");
			showAllData();
		}

		//删除html中table下的所有的子节点
		function removeAllData() {
			for(var i = datatable.childNodes.length - 1; i >= 0; i--) {
				datatable.removeChild(datatable.childNodes[i]);
			}
			var tr = document.createElement("tr");
			var th1 = document.createElement("th");
			var th2 = document.createElement("th");
			var th3 = document.createElement("th");

			th1.innerHTML = "姓名";
			th2.innerHTML = "留言";
			th3.innerHTML = "时间";

			tr.appendChild(th1);
			tr.appendChild(th2);
			tr.appendChild(th3);

			datatable.appendChild(tr);
		}

		//显示数据信息内容
		function showData(row) {
			var tr = document.createElement("tr");
			var td1 = document.createElement("td");
			var td2 = document.createElement("td");
			var td3 = document.createElement("td");

			td1.innerHTML = row.name;
			td2.innerHTML = row.message;
			var t = new Date();
			t.setTime(row.time);
			td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();

			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);

			datatable.appendChild(tr);
		}
		//显示当前本地数据库中所有的数据信息
		function showAllData() {
			db.transaction(function(tx) {
				tx.executeSql("create table if not exists MsgData(name text,message text,time integer)", []);
				tx.executeSql("select * from MsgData", [], function(tx, rs) {
					removeAllData();
					for(var i = 0; i < rs.rows.length; i++) {
						showData(rs.rows.item(i));
					}
				});
			})
		}

		//向本地数据库中添加数据
		function addData(name, message, time) {
			db.transaction(function(tx) {
				tx.executeSql("insert into MsgData values (?,?,?)", [name, message, time], function(tx, rs) {
					window.alert("插入成功！");
				}, function(tx, error) {
					window.alert(error.source + "::" + error.message);
				});
			})
		}

		//保存table中提交的数据
		function saveData() {
			var name = document.getElementById("name").value;
			var memo = document.getElementById("memo").value;
			var time = new Date().getTime();
			addData(1, 1, 1);
			showAllData();
		}

		//删除某一个表
		function dropTable() {
			var tableName = window.prompt("请输入要删除的表名称：", "");
			db.transaction(function(tx) {
				tx.executeSql("drop table " + tableName + "", [], function(tx, rs) {
					window.alert("表删除成功！");
				}, function(tx, error) {
					window.alert(error.source + "::" + error.message);
				});
			})
		}

		function ajax(options) {
			options = options || {};
			options.type = (options.type || "GET").toUpperCase();
			options.dataType = options.dataType || "json";
			var params = formatParams(options.data);

			//创建 - 非IE6 - 第一步
			if(window.XMLHttpRequest) {
				var xhr = new XMLHttpRequest();
			} else { //IE6及其以下版本浏览器
				var xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}

			//接收 - 第三步
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4) {
					var status = xhr.status;
					if(status >= 200 && status < 300) {
						options.success && options.success(xhr.responseText, xhr.responseXML);
					} else {
						options.fail && options.fail(status);
					}
				}
			}

			//连接 和 发送 - 第二步
			if(options.type == "GET") {
				xhr.open("GET", options.url + "?" + params, true);
				xhr.send(null);
			} else if(options.type == "POST") {
				xhr.open("POST", options.url, true);
				//设置表单提交时的内容类型
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send(params);
			}
		}
		var index = 1;
		list()
		var listArr = [];

		function list() {
			index++;
			ajax({
				url: 'http://www.cnijl.com/Admin/member/List', //请求地址
				type: "POST", //请求方式
				data: {
					curPage: index,
					pageSize: 20,
					filters: []
				}, //请求参数
				dataType: "json",
				success: function(data) {
					// 此处放成功后执行的代码
					var datas = JSON.parse(data);
					console.log(datas.Pagination.TotalPages)
					if(datas.Pagination.TotalPages > index) {
						//listArr = listArr.concat(datas.Datas);
						//list()
						addData(1, 1, 1)
					} else {
						console.log(listArr)
						return
					}
				},
				fail: function(status) {
					// 此处放失败后执行的代码
				}
			});
		}

		//格式化参数
		function formatParams(data) {
			var arr = [];
			for(var name in data) {
				arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
			}
			arr.push(("v=" + Math.random()).replace(".", ""));
			return arr.join("&");
		}
	</script>

</html>